<template>
    <div align="center">
        <h2>显示分页三表连查</h2>
        门店选择：
        <select v-model="info.hid">
            <option value="-1">-请选择-</option>
            <option v-for="item in hotelclass" :value="item.hotelName">{{ item.hotelName }}</option>
        </select>

        &nbsp;&nbsp;&nbsp;&nbsp;
        卡券名称： <input type="text" v-model="info.cardName" />
        &nbsp;&nbsp;&nbsp;&nbsp;
        卡券类型：
        <select v-model="info.cid">
            <option value="-1">-请选择-</option>
            <option v-for="item in cardTypeList" :value="item.cardName">{{ item.cardName }}</option>
        </select>
        &nbsp;&nbsp;&nbsp;&nbsp;
        状态:
        <select v-model="info.ustate">
            <option value="-1">-请选择-</option>
            <option value="1">上架</option>
            <option value="0">下架</option>
        </select>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <input type="button" value="查询" @click="GetLists" />
        <input type="button" value="重置" @click="reset">

    </div>

    <div align="center">
        <table class="table table-bordered" style="width: 1000px; margin: 0 auto;">
            <tbody>
                <tr>
                    <td><input type="checkbox" v-model="fcheck" @click="checkAll"></td>
                    <td>卡全名称</td>
                    <td>卡券类型</td>
                    <td>适用范围</td>
                    <td>图片</td>
                    <td>适用日期</td>
                    <td>有效期</td>
                    <td>价格(元)</td>
                    <td>排序</td>
                    <td>状态</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in wlist.res">
                    <td><input type="checkbox" :value="item.Id" v-model="ids" @change="checkOne"> </td>
                    <td>{{ item.shopName }}</td>
                    <td>{{ item.cardType }}</td>
                    <td><img :src="item.images" height="80px" alt=""></td>
                    <td>{{ item.hid }}</td>
                    <td>{{ item.allDate }}</td>
                    <td>{{ item.cardDo }}</td>
                    <td>{{ item.cardAmount }}</td>
                    <td>{{ item.id }}</td>
                    <td>{{ item.state == 1 ? '上架' : '下架' }}</td>
                    <td>
                        <input type="button" value="修改" @click="update(item.id)" />
                        <input type="button" value="修改状态" @click="upstate(item.id)" />
                        <input type="button" value="删除" @click="del(item.id)" />
                    </td>
                </tr>
            </tbody>
        </table>
        当前第{{ info.pageIndex }}页/共{{ wlist.totalPage }}页/共{{ wlist.totalCount }}条数据
        <input type="button" value="首页" @click="info.pageIndex = 1, GetLists()" /> &nbsp;&nbsp;&nbsp;&nbsp;
        <input type="button" value="上一页" @click="info.pageIndex--, GetLists()" /> &nbsp;&nbsp;&nbsp;&nbsp;
        <input type="button" value="下一页" @click="info.pageIndex++, GetLists()" /> &nbsp;&nbsp;&nbsp;&nbsp;
        <input type="button" value="尾页" @click="info.pageIndex = wlist.totalPage, GetLists()" /> <br />
        <span v-for="item in wlist.totalPage" @click="info.pageIndex = item, GetLists()">{{ item }}&nbsp;&nbsp;</span>
        跳转到第<input type="text" v-model="info.pageIndex" />页
        每页显示<input type="text" v-model="info.pageSize" />条数据
    </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()

//他叫勾子函数,在页面加载时执行,类似于文档就虚函数的作用
onMounted(() => {
    Bindcard();
    Bindhotel();
    GetLists();
})

//修改
const update = (id: any) => {
        //判断是否确认修改
        if (confirm("确认要修改吗？") == false) {
        return;
    }

    router.push({ path: "/update", query: { id: id } })
}



//分页查询
const GetLists = () => {
    axios({
        url: "/api/Hotel/Shows",
        method: "get",
        params: info
    }).then((res) => {
        wlist.res = res.data.res;
        console.log(res.data);
        
        wlist.totalPage = res.data.totalPage;
        wlist.totalCount = res.data.totalCount;
    })
}



//接取后端数据 映射到页面
let wlist: any = reactive({
    res: [],
    totalPage: 0,
    totalCount: 0
})


const reset = () => {
    info.hid = -1;
    info.uname = "";
    info.cid = "-1";
    info.ustate = "-1";
}

//后端条件查询所需要的参数
let info: any = reactive({
    pageIndex: 1,
    pageSize: 2,
    hid: -1,
    uname: "",
    cid: "-1",
    ustate: "-1"
})


let cardTypeList = ref([]);
//绑定下拉框
const Bindcard = () => {
    axios({
        url: "/api/Hotel/BindCard",
        method: "get",
    }).then((res) => {
        // console.log(res.data);
        cardTypeList.value = res.data;
    })
}

let hotelclass = ref([]);

//绑定下拉框
const Bindhotel = () => {
    axios({
        url: "/api/Hotel/BindHotel",
        method: "get",
    }).then((res) => {
        // console.log(res.data);
        hotelclass.value = res.data;
    })
}

const del = (id: any) => {
    axios({
        url: "/api/Hotel/DelShop",
        method: "delete",
        params: {
            uid: id
        }
    }).then((res) => {
        if (res.data > 0) {
            alert("删除成功");
            GetLists();
        } else {
            alert("删除失败");
            return;
        }
    })
}



//上架
const downstate = (id: any) => {
    axios({
        url: "/api/Hotel/DownState",
        method: "put",
        params: {
            uid: id
        }
    }).then((res) => {
        if (res.data > 0) {
            alert("修改成功");
            GetLists();
        } else {
            alert("修改失败");
            return;
        }
    })
}



//下架
const upstate = (id: any) => {
    axios({
        url: "/api/Hotel/UpdState",
        method: "put",
        params: {
            uid: id
        }
    }).then((res) => {
        if (res.data > 0) {
            alert("修改成功");
            GetLists();
        } else {
            alert("修改失败");
            return;
        }
    })
}




let ids: any = ref([]);
let fcheck: any = ref(false);

//全选

const checkAll = () => {
    fcheck.value = !fcheck.value;
    if (fcheck.value == true) {
        ids.value = wlist.res.map((item: any) => {
            return item.Id;
        })
    } else {
        ids.value = [];
    }
    console.log(ids);

}



//反选
const checkOne = () => {
    if (ids.value.length == wlist.res.length) {
        fcheck.value = true;
    } else {
        fcheck.value = false;
    }
}




</script>

<style scoped></style>